<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <title>会员同步</title>
    <jsp:include page="../../include/header.jsp"></jsp:include>
      <style type="text/css">
			table td{
			text-align: center;
			}
		 	table th{
			text-align: center;
		 	}
		 	#notData{
		 	text-align: center;
		 	}	
		</style>
</head>
<body>
<div id="wrapper">
	
	<jsp:include page="../../include/javascripts.jsp"></jsp:include>
	<div id="page-wrapper1">
		<div class="row">
			<div class="col-xs-12 col-md-12 col-lg-12">
				<div class="panel-default">
					<div class="panel-heading">当前位置：劵票转换>会员同步>批量导入 | 
					<a href="javascript:history.back(-1)">返回</a></div>
				</div>
			</div>
		</div>
		<div class="row panel-body" >
			<div class="form-group"  style="margin-left: 5%;">
				<label class=" control-label" style="font-size: 18px;">批量导入</label><br/>
				<span>系统中已有的数据暂不支持导入更新，只能在系统中修改数据信息。请先下载模板，按格式导入，单次导入数据量最好不超过1000条</span>
			</div>
			<hr class="hr-line"/>
			<form id="editForm" action="${BASE_PATH}/change/sync/doImportExcel" method="post" class="form-horizontal" enctype="multipart/form-data" style="width:50%; margin-left:5%;">
				<div class="form-group">
						<div class="col-lg-10">
							<input type="file" id="memberList" name="memberList" title="会员信息">&nbsp;&nbsp;
							<a href="${BASE_PATH}/change/sync/downExcelTemplate">下载Excel模板</a>，支持xls,xlsx类型文件，最多允许上传数：1
						</div>
				</div>
				<div class="row">
					<div class="col-lg-2"><button class="btn" type="submit" autocomplete="off">确定导入</button></div>
				</div>
			</form>
		</div>
		<br/>
		<div class="row panel-body" >
			<div class="col-lg-12">
				<div class="table-responsive">
					<table id="dataTable" class="table table-striped table-hover" style="overflow:scroll;">
			            <thead>
			                <tr>
							    <th width="60px;">序号</th>
								<th width="150px;">状态</th>
								<th width="120px;">原导入文件</th>
								<th width="100px;">导入时间</th>
								<th width="200px;">导入结果</th>
							</tr>
			            </thead>
			            <%-- <tbody>
					        <c:forEach items="${list}" var="userChangeExcel">
								<tr>
									<td>${userChangeExcel.id }</td>
									<td>
									<c:if test="${userChangeExcel.status==1}">成功</c:if>
									<c:if test="${userChangeExcel.status!=1}">失败</c:if>
									</td>
									<td>${userChangeExcel.fileName }</td>
									<td>${userChangeExcel.createTime }</td>
									<td>${userChangeExcel.cause }</td>
								</tr>
							</c:forEach>
			        	</tbody> --%>
			        	<tbody id="dataList"></tbody>
			        </table>
				</div>
		        <div class="row">
		        	<div class="col-lg-12">
		        		<div class = "pull-right">
		        			<div class="text-muted single-line-text pull-left" style="margin-top:19px; margin-right:18px;">共 <font color="#428bca" id="dataCount">0</font> 条&nbsp;&nbsp;&nbsp;&nbsp;10/页 </div>
		        			<ul id="dataPagination" class="pagination-sm "></ul>
		        		</div>
		        	</div>
		        </div>
			</div>
		</div>
		
	</div>
	
</div>
<!-- 异步加载下一页数据后，用模板渲染 -->
<script type="text/html" id="dataTpl">
	{{each list as item}}
		<tr id="{{item.id}}" data-id="{{item.id}}">
			<td>{{item.id}}</td>
			<td>{{item.status | flagTransform:0,'失败',1,'成功'}}</td>
			<td>{{item.fileName}}</td>
			<td>{{item.createTime}}</td>
			<td>{{item.cause}}</td>
		</tr>
	{{/each}}
</script>

<script type="text/javascript">
$('#memberList').fileinput({
	language: 'zh',  //设置语言
    allowedFileExtensions: ['xls','xlsx'],//接收的文件后缀
	showUpload: false, //是否上传文件
 	browseClass: "btn btn-primary" //按钮样式             
});
$(function(){
	//初始化表单验证
	$("#editForm").validate({
		submitHandler:function(form){
			$(form).ajaxSubmit({
				success:function(data){
					console.log(data);
					switch(data.flag){
					case -1:
						Kit.alert(data.message);return;
					case 0:
						Kit.alert("转换成功");
						window.location.href = "${BASE_PATH}/change/sync/doDelivery";
					}
				}
			});
		}
	});
});

var dataPaginator;
 $(query());
function query(){
	
	var params = {
			pageSize:10
		};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/change/sync/importLog",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
} 

function downTemplate(){
	window.location.href = "${BASE_PATH}/change/sync/downExcelTemplate";
}
</script>
</body>
</html>